<template>
    <el-container style="height: 100%; width: 100%" class="home">
        <el-header>
            <div type="primary">
                <router-link to="#"
                    ><img
                        @click="isCollapse = !isCollapse"
                        src="../assets/images/logo.png"
                        alt=""
                /></router-link>
                <ul class="home-nav">
                    <li>
                        <router-link to="#">壹钱包商户中心</router-link>
                    </li>
                    <li>客服热线：400-888-0999</li>
                </ul>
                <ol>
                    <li>
                        <router-link to="#">我的壹钱包</router-link>
                    </li>
                    <li>
                        <router-link to="#">操作手册</router-link>
                    </li>
                    <li v-if="userInfo.M_LoginID">
                        你好:{{ userInfo.M_LoginID }} | 积分:{{
                            userInfo.M_Scores
                        }}
                    </li>
                    <li v-else @click="$router.push('/')">请登录</li>
                    <li
                        @click="
                            logout();
                            isLog = false;
                            $router.push('/login');
                        "
                    >
                        [退出]
                    </li>
                </ol>
            </div>
        </el-header>
        <el-container>
            <el-aside
                style="background-color: #293038"
                :style="{ width: isCollapse ? '50px' : '180px' }"
            >
                <el-menu
                    :router="true"
                    default-active="/home/acount"
                    class="el-menu-vertical-demo"
                >
                    <el-menu-item index="/home/acount">
                        <span slot="title">账号管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/transaction">
                        <span slot="title">交易管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/fundmanage">
                        <span slot="title">资金管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/minad">
                        <span slot="title">审核管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/admin">
                        <span slot="title">插件管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/cardservice">
                        <span slot="title">卡券服务</span>
                    </el-menu-item>
                    <el-menu-item index="7" @click="$router.push('#')">
                        <span slot="title">操作员管理</span>
                    </el-menu-item>
                    <el-menu-item index="8" @click="$router.push('#')">
                        <span slot="title">商户设置</span>
                    </el-menu-item>
                    <el-menu-item index="9" @click="$router.push('#')">
                        <span slot="title">下载中心</span>
                    </el-menu-item>
                    <el-menu-item index="10" @click="$router.push('#')">
                        <span slot="title">回单验证</span>
                    </el-menu-item>
                    <el-menu-item index="11" @click="$router.push('#')">
                        <span slot="title">进行上传</span>
                    </el-menu-item>
                    <el-menu-item index="12" @click="$router.push('#')">
                        <span slot="title">交易管理</span>
                    </el-menu-item>
                    <el-menu-item index="13" @click="$router.push('#')">
                        <span slot="title">操作员管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main style="padding: 0; width: 100%; height: 100%"
                ><router-view></router-view
            ></el-main>
        </el-container>
    </el-container>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                isCollapse: false,
            };
        },
        created() {
            // onresize 当窗口尺寸发生变化时候
            window.onresize = () => {
                // 获取视口的宽
                var w = window.innerWidth;
                // 如果小于1200 就折叠
                if (w < 1200) {
                    this.isCollapse = true;
                } else {
                    this.isCollapse = false;
                }
            };
        },
        methods: {
            // 退出
            logout() {
                this.$store.dispatch('user/Logout');
            },
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo,
            }),
        },
    };
</script>

<style scoped="scoped">
    .home header {
        background-color: #0075d2;
        height: 50px !important;
        padding: 0;
    }

    header .home-nav {
        display: inline-block;
    }

    header li {
        display: inline-block;
        color: #ffffff;
    }

    .home-nav > li:nth-of-type(1) {
        width: 152px;
        height: 100%;
        margin: 0 20px;
    }

    .home-nav > li:nth-of-type(1) > a {
        display: inline-block;
        width: 100%;
        height: 100%;
        line-height: 50px;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
    }

    .home-nav > li:nth-of-type(2) {
        width: 140px;
        height: 100%;
        margin: 0 20px;
        line-height: 50px;
        font-size: 12px;
        text-align: center;
    }

    header ol {
        display: inline-block;
        float: right;
    }

    ol > li:nth-of-type(1) {
        width: 107px;
        height: 100%;
    }

    ol > li:nth-of-type(1) > a {
        display: inline-block;
        width: 100%;
        height: 100%;
        line-height: 50px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
    }

    ol > li:nth-of-type(2) {
        width: 93px;
        height: 100%;
        border-left: 1px solid #0066c4;
        border-right: 1px solid #0066c4;
    }

    ol > li:nth-of-type(2) > a {
        display: inline-block;
        width: 100%;
        height: 100%;
        line-height: 50px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
    }

    ol > li:nth-of-type(3) {
        width: 200px;
        height: 100%;
        line-height: 50px;
        font-size: 14px;
        text-align: center;
        border-right: 1px solid #0066c4;
    }
    ol > li:nth-of-type(4) {
        width: 100px;
        height: 100%;
        line-height: 50px;
        font-size: 14px;
        text-align: center;
    }
    .home .el-menu-vertical-demo {
        width: 180px;
        height: 100%;
        background-color: #293038;
        margin: 0;
        padding-top: 50px;
    }
    .el-menu-vertical-demo > li {
        width: 100%;
        height: 50px;
        margin: 0;
        padding: 0 !important;
    }
    .el-menu-vertical-demo > li > span {
        display: block;
        width: 100%;
        height: 100%;
        color: #ffffff;
        font-size: 15px;
        line-height: 50px;
        text-align: left;
        padding-left: 50px;
    }
    .is-active {
        background-color: #394457 !important;
    }
    .el-menu-item:hover {
        background-color: #394457 !important;
    }
</style>
